<template>
	<view class="add-device">
		<AppNavbar :bgColor="'transparent'" titlecolor="white" :fontWeight="600" :title="'Add Device'"
			righticon="/static/icon/sao.png" @rightClick="toScan"></AppNavbar>

		<view class="add-device-main" :style="{height:height+'px'}">
			<view class="add-device-center">
				<image src="/static/image/Snipaste_2024-12-03_17-19-20.png" mode="" @click="scanFun"></image>
				<view>
					Please scan the QR code on the device

				</view>
				<view @click="show=true">
					The device did not hnd a QR code?
				</view>
			</view>
			<view class="add-device-bottom">
				<view>
					Switch account
				</view>
				<text>|</text>
				<view @click="toAddPet">
					No equipment?
				</view>
			</view>
		</view>
	</view>
	<Mymodal :show="show" title="The device did not find a QR code">
		<template #content>
			<view>
				<view>
					1. Check whether there is a two dimensional code on the surface of thedevice.
				</view>

				<view>
					2. lf you still can't find the QR code?Please contact the after-sales serviceof the official store.
					Thank you!
				</view>
			</view>
		</template>
		<template #confirmButton>

			<up-button :text="'OK'" plain shape="circle" size="small" color="#11e2bd" style="width: 250rpx;"
				@click="show=false" class="mt-2 "></up-button>
		</template>
	</Mymodal>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	import Mymodal from '/components/Mymodal/Mymodal.vue';
	const show = ref(false);
	const height = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - 44
	const toVip = () => {
		uni.$to("/pages/Vip/VipCenter")
	}
	const scanFun = () => {
		console.log(111);
		// 允许从相机和相册扫码
		uni.scanCode({
			success: function(res) {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
			}
		});
	}
	const toScan = () => {
		console.log(2222);
		uni.navigateTo({
			url: '/pages/MyPet/Scan'
		})
	}
	const toAddPet = () => {
		uni.navigateTo({
			url: '/pages/MyPet/AddPet'
		})
	}
	onLoad(() => {
		// #ifndef H5
		plus.navigator.setStatusBarStyle("light");
		// #endif
		// show.value = tru
	})
</script>

<style lang="scss" scoped>
	.add-device {
		width: 100vw;
		height: 100vh;
		background-image: url('/static/image/homePage.png');
		background-position: center center;
		background-size: cover;

		.add-device-main {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-end;
			color: #fff;

			.add-device-center {
				position: relative;
				top: -200px;
				height: 250px;
				// border: 1px solid red;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-evenly;

				image {
					width: 120px;
					height: 120px;
					border-radius: 32rpx;
				}

				view {
					font-weight: 600;
					font-size: 30rpx;

					&:nth-of-type(2) {
						font-size: 24rpx;
						font-weight: normal;
					}
				}
			}

			.add-device-bottom {
				position: relative;
				top: -20rpx;
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;

				view {
					padding: 32rpx;
					// border-right: 1px solid red;
				}

				border-bottom: 1rpx solid #fff;
			}
		}

	}
</style>